<!DOCTYPE html>
<!-- saved from url=(0077)http://47.97.127.120/esb-monitor/report/mamagement/monitoring/peak?lang=zh_CN -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>实时交易监控</title>
<link href="../../plugins/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../../plugins/perfect-scrollbar/css/perfect-scrollbar.min.css" rel="stylesheet">
<link href="../../plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="../../css/Servicehomepage.css" rel="stylesheet">
<script src="../../js/jquery-2.2.4.js"></script>
<script src="../../js/cookie.js"></script>
<script src="../../js/prompt.js"></script>
<script src="../../plugins/echarts/echarts.min.js"></script>
<script src="../../plugins/layer/layer.js"></script><link rel="stylesheet" href="./layer(1).css" id="layuicss-skinlayercss">
<script src="../../libs/bootstrap-table.min.js"></script> 
<script src="../../js/reportCommon.js"></script>
<style>

#main {
	height: 95%;
}
 
</style>
</head>
<body>
<div id="alert"></div>
<div style=" position: absolute;  top: 50%;  left: 50%;transform: translate(-50%, -50%); z-index:99;">
	<img id="serverLoading" src="./loading-0.gif" style="display: none;"></div>
	<div class="Contents clear">
		<ol class="breadcrumb">
			 <li class="active"> <i class="ics"></i>平台监控</li> 
   			 <li class="active">预防性监控</li> 
			<li class="active">实时交易监控</li>
		</ol>
		<i class="line" style="margin-bottom: 20px;"></i>
	</div>


	<div style="width:100%;margin:auto" id="main"><div class="col-sm-12" style=" height:95%"><div style="height:90%;" id="panel_ESB_BK010" name="bk_panel0" class="panel panel-success"><div class="panel-heading"><h3 class="panel-title">ESB_BK01<lable name="bk0"></lable></h3></div><div class="panel-body" style="height: 90%; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;" id="ESB_BK010" _echarts_instance_="ec_1530266095142"><div style="position: relative; overflow: hidden; width: 1074px; height: 480px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas width="1074" height="480" data-zr-dom-id="zr_0" style="position: absolute; left: 0px; top: 0px; width: 1074px; height: 480px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: block; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px &quot;Microsoft YaHei&quot;; padding: 5px; left: 488px; top: 376px;">17:55:01<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#337ab7;"></span>交易次数: 0</div></div></div></div></div>
	
	<script>
var bkArr = new Array();
var myChartArr = new Array();
var mylen = 0;
var yAxisArr = new Array();
var dataArr = new Array();
var dataArr2 = new Array();
var end = 0;
var interval;
var now;

var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            animation: false
        }
    },
    toolbox: {
        show: true,
		right: '5%',
        feature: {
            saveAsImage: {
                show: true,
                title: '保存图片'
            }
        }
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        name: '交易次数',
        boundaryGap: [0, '10%'],
        splitLine: {
            show: false
        }
    },
    series: [{
        name: '交易次数',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: [],
        itemStyle: {
            normal: {
                color: '#337ab7'
            }
        }
    }]
};
var config={};

$(function() {
	$.getJSON("http://47.97.127.120/esb-monitor/config/monitor-config.json",function(data){
	
		config =data;
		interval = config.mamagement.peakMonitoring.intervaltime||3;
		now = new Date();
	    getServerIp();	
	    yAxisArr=  config.mamagement.peakMonitoring.maxCount;
	    setInterval(function() {
	        if (mylen > (config.mamagement.peakMonitoring.maxSize||200)) {
	            for (var j = 0; j < dataArr.length; j++) {
	                dataArr[j].shift();
	                dataArr2[j].shift();
	            }
	        }
	        
	         for (var i = 0; i < dataArr2.length; i++) {
	         		var count = Math.max.apply(null,  dataArr2[i]);
	         		 
	               if(count>=yAxisArr[i]){	              
                	 $("div[name='bk_panel"+i+"']").removeClass().addClass("panel panel-danger");               	
	                }else if(count>=yAxisArr[i]*0.8){                
	                	 $("div[name='bk_panel"+i+"']").removeClass().addClass("panel panel-warning");
	                }else{	                
	                	 $("div[name='bk_panel"+i+"']").removeClass().addClass("panel panel-success");
	           		}
	           }

	        createCharts();
	    }, interval*1000);
	 });   
});

//获取所有BK
function getServerIp() {
    $.ajax({
        url: 'http://47.97.127.120/esb-monitor/report/esbMbServerData',
        type: 'post',
        dataType: 'json',
        data: {},
        timeout: (config.mamagement.peakMonitoring.timeout||5)*1000,
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            $('#serverLoading').css("display", "none");
            promptError($('#alert'), XMLHttpRequest, textStatus);
        },
        success: function(result) {          
            if (result.code == "0") {
                var len = result.data.length;
                end = len;
                if (len > 0) { //有数据   
                    for (var i = 0; i < len; i++) {
                        dataArr.push([]);
                        dataArr2.push([]);
                        bkArr.push(result.data[i].bkName);
                        //创建页面
                        createPeak(result.data[i].bkName, i, len);
                        
                    }
                    createCharts();
                } else {
                    $('#serverLoading').css("display", "none");
                    promptInformation($("#alert"), 3, '平台暂未配置相关基础信息');
                }

            } else {
                $('#serverLoading').css("display", "none");
                promptInformation($("#alert"), 3, '平台暂未配置相关基础信息');
            }
        }
    });
}

function createPeak(bkName, i, len) {
    var size;
    if (len == 1) {
        size = 12;
        height = "95%";
    } else if (len == 2) {
        size = 12;
        height = "60%";
    } else {
        size = 6;
        height = "60%";
    }
   
    var brokeHtml = '<div class="col-sm-' + size + '" style=" height:' + height + '"><div style="height:90%;" id="panel_' + bkName + i + '" name="bk_panel' + i + '" class="panel panel-success"><div class="panel-heading" >' + '<h3 class="panel-title">' + bkName + '<lable name = "bk' + i + '"></lable></h3></div><div class="panel-body" style="height:90%"  id="' + bkName + i + '"> </div></div>';
    $('#main').append(brokeHtml); //拼装页面     
    var myChart = echarts.init(document.getElementById(bkName + i));
    myChart.setOption(option);
    myChartArr.push(myChart);
}

function createCharts() {
    mylen++;
    for (var i = 0; i < bkArr.length; i++) {
        setCharts(bkArr[i], i);
    }
}

function setCharts(bk, i) {
    
    var startTime = getNowFormatDate(now - interval*1000);
    var endTime = getNowFormatDate(now);

    $.ajax({
        url: 'http://47.97.127.120/esb-monitor/report/tradingStatisticsByMonitoringData',
        type: 'post',
        dataType: 'json',
        data: {
            startTime: startTime,
            endTime: endTime,
            bk: bk,
        },
        timeout: (config.mamagement.peakMonitoring.timeout||5)*1000,
        error: function(XMLHttpRequest, textStatus, errorThrown) {
        	$("#panel_"+bk+i).removeClass().addClass("panel panel-success");
            if (end == 1) {
                $('#serverLoading').css("display", "none");
            } else {
                end--;
            }
            setChartData(i, null, now);
        },
        success: function(result) {					
            if (end == 1) {
                $('#serverLoading').css("display", "none");
            } else {
                end--;
            }
            var count;
            if (result.code == "0") {  
           	         	
                count = Math.round(parseInt (result.data.count || 0)/interval);
                dataArr2[i].push(count);
                
            } else {
            	 
            	dataArr2[i].push(data||0);
                count = null;
            }
            setChartData(i, count, now);
        }
    });
}

function setChartData(i, data) {
	
    dataArr[i].push({
         name: [now.getFullYear(), bitsAdd0(now.getMonth() + 1), bitsAdd0(now.getDate())].join('-') + ' ' + [bitsAdd0(now.getHours()), bitsAdd0(now.getMinutes()),bitsAdd0(now.getSeconds())].join(':'),
        value: [[now.getFullYear(), bitsAdd0(now.getMonth() + 1), bitsAdd0(now.getDate())].join('-') + ' ' + [bitsAdd0(now.getHours()), bitsAdd0(now.getMinutes()),bitsAdd0(now.getSeconds())].join(':'), data]
      });
now = new Date(+now + interval*1000);
    myChartArr[i].setOption({
        series: [{
            data: dataArr[i]
        }]
    });
    myChartArr[i].setOption({
        series: [{
            data: dataArr[i],
            markLine: {
                lineStyle: {
                    normal: {
                        color: '#c23531',
                        type: 'dashed'
                    }
                },
                data: [{
                    name: '警戒值',
                    yAxis: yAxisArr[i]
                }]
            }
        }]
    });
}

window.onresize = function() {
    for (var j = 0; j < myChartArr.length; j++) {
        myChartArr[j].resize();
    }

};
	</script>


</body></html>